<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>修改账户信息</title>
    <!-- Bootstrap core CSS -->
    <link href="../css/coach/bootstrap.css" rel="stylesheet">
    <!-- Add custom CSS here -->
    <link href="../css/coach/sb-admin.css" rel="stylesheet">
    <!-- Page Specific CSS -->
    <link rel="stylesheet" href="../css/coach/morris-0.4.3.min.css">
	<link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="import" href="../jsp/toolbar.jsp" id="head"> 	
	<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=rsi8ehEBjC2RV6a6Nbgwt7e0RjSv8lRH"></script>
	<script type="text/javascript" src="../js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/data.js"></script>
    <script type="text/javascript" src="../js/province.js"></script>

	  <style>
		  	#allmap {
		width: 600px;
		height: 300px;
		overflow: hidden;
		margin:0;
		font-family:"微软雅黑";
	}
		  	
		  	
		  	#all{
		  	width: 1000px;
		  	height: 80%;
		  	position: absolute; left: 50%; top: 50%;
		  	text-align: center;
		  	transform: translate(-50%, -50%);		
		  }
		  body{
		  	background-image: url(../images/top.jpg);
		  	background-position: 100% 100%;
		  	background-attachment: fixed;
		  	background-repeat: no-repeat;
		  	background-size: cover; -moz-background-size: cover; 
		  }  
		  #headFrame{
			  width: 150px;
			  height: 150px;
			  border: 1px solid #000000;
			  position: absolute; left: 50%; top: 5%;
			  background-size: cover;
			  background-repeat: no-repeat;
		  }
		  #headDiv{
		  		width:80px;
		  		height: 50px;
		  		position: absolute; left: 65%; top: 28%;
		  }
		 .message{
			width: 80%;
			height: 110%;
			position: absolute;
			top: 40%;
			left: 20%;
			font-size: 15px;
			color: olive;
			text-align: center;			
		} 
		text{
			padding-top:5px;
		}
		input {
		margin-bottom: 5px;
}
	  </style>
	<script>
		layui.use('form', function(){
 		 var form = layui.form;
		});
	</script>		  
	  
	</head>
	<body>
		<script type="text/javascript">
		document.write(head.import.body.innerHTML);
		</script>
		<div id="all">	
			<!-- 头像 -->
			<div id="headFrame" style="border:0">
			<img src="" width="150px" height="150px" id="my-img"/>		
			</div>
			<div id="headDiv">
			<form id="headForm"  enctype="multipart/form-data" method="post">
			<input type="file" name="headImage" onchange="upload()" id="img-upload" style="display: none">
			</form>			
			</div>
	<div class="message">	
	
	<form  class="layui-form layui-form-pane" id="formMessage">
	<div id="updateMessage"></div>
		<div class="layui-form-item" >
		<div class="layui-input-inline">省：<select name="provid" id="provid" lay-filter="provid"><option value="">请选择省</option></select></div>
		<div class="layui-input-inline">市：<select name="cityid" id="cityid" lay-filter="cityid"><option value="">请选择市</option></select></div>
		<div class="layui-input-inline">区：<select name="areaid" id="areaid" lay-filter="areaid"><option value="">请选择县/区</option></select></div></div>
		<div id="allmap"></div>
	<div id="myMessage" style="margin-top: 50px"></div>
</form>

 </div>
 
 </div>
	  <script>
	 
	  
	  
	  //Demo
	  layui.use('form', function(){
	    var form = layui.form;
	    
	    form.render(); 
	    //监听提交
	   /*这里控制text有文字才能提交  */
	   /*  form.on('submit(formDemo)', function(data){
	      layer.msg(JSON.stringify(data.field));
	      return false; 
	      
	    }); */ 
	  });
	  
	  
	  
	  
	  
	  
	  

	  
	 
	//地图上获取地址
	  var selectAddress=""
	 /*  addressInit('cmbProvince', 'cmbCity', 'cmbArea', '四川', '成都市', '武侯区'); */    //初始化下拉框信息显示
	  // 百度地图API功能
	  var map = new BMap.Map("allmap");    // 创建Map实例
	  map.centerAndZoom(new BMap.Point(104.07, 30.67), 13);  // 初始化地图,设置中心点坐标和地图级别
	  //添加地图类型控件
	  map.addControl(new BMap.MapTypeControl({
	  	mapTypes:[
	          BMAP_NORMAL_MAP,
	          BMAP_HYBRID_MAP
	  	]}))
	  map.setCurrentCity("成都");
	  map.enableScrollWheelZoom(true);         //启用滚轮缩放

	  var geoc = new BMap.Geocoder();    
	  map.addEventListener("click", function(e){        //监听地图点击事件
	  	map.clearOverlays();     //清除当前地图上存在的点
	  	//alert(e.point.lng + "," + e.point.lat);  //获取点击地区经纬度坐标
	  	var point2 = new BMap.Point(e.point.lng, e.point.lat);
	  	map.addOverlay(new BMap.Marker(point2));   //在点击的位置放置点
	  	var pt = e.point;
	  	geoc.getLocation(pt, function(rs){
	  		var addComp = rs.addressComponents;
	  		//获取点击的地址信息,是以[Object,Object]形式
	  		//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
	  		//selectAddress即为拼接出来的在地图上点击的最终地址
	  		selectAddress=addComp.province +addComp.city +addComp.district +addComp.street +addComp.streetNumber;
	  		alert(selectAddress);
	  		
	  		 showMessage();  
	  	});        
	  }); 
	
	  
	  
	  $(document).ready(function(){
		  showMessage();  
			
			 
			$('#headFrame').click(function(){
		        $('#img-upload').click();
		    });
		
		  
		  layui.use(['form','element','jquery','layer'], function(){
				form.on('select()',function(data){
					//alert($("#provid option:selected").text()+$("#cityid option:selected").text()+$("#areaid option:selected").text());
					form.render();
					var address=$("#provid option:selected").text()+$("#cityid option:selected").text()+$("#areaid option:selected").text();
					//alert(address);
					// 创建地址解析器实例     
					var myGeo = new BMap.Geocoder();      
					// 将地址解析结果显示在地图上，并调整地图视野    
					myGeo.getPoint(address, function(point){      
						if (point) {      
							map.centerAndZoom(point, 18);      
							//map.addOverlay(new BMap.Marker(point));      
						}      
					 }, 
					 $("#cityid option:selected").text());
				})
			});

	  
	  
	  
	  })	
	
	
	
		
function showMessage(){
			$.ajax({
				url:"/vi_user_gym/selectByUid",
				type:"post",
				success:function(data){
					// 改变头像图片源
					if (data.headImage == ""||data.headImage==null) {
						//设置默认头像图片
						$("#my-img").attr("src", "/images/滑稽.png");
						}
					else{
					$("#my-img").attr("src", "/images/" + data.headImage);
					}
					if(data.nickName==null ||data.nickName==""){
						data.nickName="未知";
					}
					if($("input[name='nickName']").val()!=null && $("input[name='nickName']").val()!=""){
							data.nickName=$("input[name='nickName']").val();
					}
					
					if(data.gname==null ||data.gname==""){
						data.gname="未知"
					}
					if($("input[name='gname']").val()!=null && $("input[name='gname']").val()!=""){
							data.gname=$("input[name='gname']").val()
					}
					if(data.ggrade==null ||data.ggrade==""){
						data.ggrade="未知"
					}
					if($("input[name='ggrade']").val()!=null && $("input[name='ggrade']").val()!=""){
							data.ggrade=$("input[name='ggrade']").val()
					}
					
					if(data.address==null||data.address==""){
						data.address="未知"
					}
					 if(selectAddress!=null &&selectAddress!=""){
						 data.address=selectAddress; 
					} 
					
					
					if(data.gintroduction==null ||data.gintroduction==""){
						data.gintroduction="未知"
					}
					if($("textarea[name='gintroduction']").val()!=null &&$("textarea[name='gintroduction']").val()!=""){
							data.gintroduction=$("textarea[name='gintroduction']").val()
						
					}
					// 通过改变 text的value值来显示的信息
					var val=""
					var content ='<div class="layui-form-item" style="font-size: 20px; text-align: center" >基本信息</div>';
					var nickName ='<label class="layui-form-label" ">昵称</label>'
						+'<div class="layui-input-inline">'
					    +'<input type="text" name="nickName"  required lay-verify="required" value="'+data.nickName+'"  autocomplete="off" class="layui-input">'		
						+'</div>'
					var gname ='<label class="layui-form-label" >场馆名称</label>'
						+'<div class="layui-input-inline">'
					    +' <input type="text" name="gname" value="'+data.gname+'"  required lay-verify="required"  autocomplete="off" class="layui-input">'		
						+'</div>';					
					
						var ggrade ='<label class="layui-form-label" >评分</label>'
							+'<div class="layui-input-inline">'
						    +' <input type="text" name="ggrade" value="'+data.ggrade+'"  required lay-verify="required"  autocomplete="off" class="layui-input">'		
							+'</div>';	
						
						var address='<div class="layui-form-item" id="address">'
						+' <label class="layui-form-label">地址</label>'
						+'<div class="layui-input-inline" style="width: 50%;">'
						+'<input type="text" name="address" value="'+data.address+'"  required lay-verify="required"  autocomplete="off" class="layui-input">'					 
						+'</div></div> '
						
					var gintroduction ='<div class="layui-form-item ">'
					    +'<label class="layui-form-label">场馆介绍</label>'
					    +'<div class="layui-input-inline" style="width: 70%;">'
					     +' <textarea name="gintroduction"   class="layui-textarea">'+data.gintroduction+'</textarea>'
					   +' </div></div>'		
					var botton='<div class="layui-form-item">'
					    +'<div class="layui-input-block">'
					    +'<input type="button" class="layui-btn" onclick="send()" value="修改信息">'
					    +'<button type="reset" class="layui-btn layui-btn-primary">重置</button>'			    
					    +'</div></div>'				
						
					content+=
					'<div class="layui-form-item">'
					+nickName
					+gname+'</div>'
						
					+'<div class="layui-form-item">'+ggrade+'</div>'
					
					+address
					val=gintroduction+botton

					$("#updateMessage").html(content)	
					$("#myMessage").html(val)
					  layui.use('form', function(){
						    var form = layui.form;	    
						    form.render(); 
						  });
				}	
			});
		}





	  function send(){
			 $.ajax({
		    	  url:"/vi_user_gym/updateGym",
		    	  type:"post",
		    	  data:$("#formMessage").serialize(), 
		    	  
		    	  success:function(data){
		    		  alert(data);
		    		  location.href="/html/gymBasic.html";
		    	  }	  
		      });
	  }
	 
	//上传头像
	  function upload() {
	      
	      var formData = new FormData($("#headForm")[0]);
	      
	      $.ajax({
	         
	          url: '/user/head' ,
	          type: 'POST',
	          data: formData,
	          async: false,
	          cache: false,
	          contentType: false,
	          processData: false,
	          success: function (data) {
	          	$("#my-img").attr("src",  data);
	          },
	         
	      });
	  }








	
		
		
		
		
		</script>	
		
				
				
	</body>
</html>
